<template>
  <el-input v-model="input"
            :placeholder="placeholder"
            :style="{'width': width}"
            @change="change"
            :fetch-suggestions="querySearchAsync">

    <template v-if="hasBtn" #append>
      <el-button type="primary" :icon="icon" @click="submit">{{btnText}}</el-button>
    </template>
  </el-input>
</template>

<script lang="ts">
import {reactive, ref} from 'vue'
import {Search} from '@element-plus/icons-vue'

export default {
  name: "Search",
  props: {
    placeholder: {
      type: String,
      default: "搜索"
    },
    width: {
      type: String,
      default: '60%'
    },
    hasBtn: {
      type: Boolean,
      default: true
    },
    prefixIcon: {
      type: Object,
      default: Search
    },
    icon: {
      type: Object,
      default: Search
    },
    btnText: {
      type: String,
      default: ""
    }
  },
  setup(props: any, ctx: any) {
    const input = ref("")
    // 向父组件发送该输入框的信息
    const change = (value: String|Number) => {
      ctx.emit("inputText", value)
    }
    // TODO 异步访问数据
    const querySearchAsync = () => {

    }

    const submit = () => {
      ctx.emit("submit")
    }

    return {
      input,
      change,
      Search,
      querySearchAsync,
      submit
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
